<template>
    <orh-table reload  @on-reload="refresh" class="dutymodule-myclassduty">

        <Table border stripe :columns="columns" :data="data" :loading="tableload" slot="table"></Table>

        <orh-sidebar v-model="show" title="查看详情" scale slot="others">
            <component :is="content" :condition="condition"></component>
        </orh-sidebar>

    </orh-table>
</template>
                
<script>
export default {
    name: 'dutymodule-myclassduty',
    components: {
        See: resolve => { require(['./See.vue'], resolve) },
    },
    data () {
        return {
            show: false,
            content: 'See',
            tableload: true,
            data: [],
            columns: [],

            url: 'api/watchlist/v1/watchlistfrostatistics/classindexcont?page=',
            condition: null,
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 手动刷新数据
         * 
         ************************************************************/
        refresh () {
            this.data = []
            this.columns = []
            this.tableload = true
            this.queryData (1)
        },
        
        /************************************************************
         * 
         * 查看详情数据
         * 
         ************************************************************/
        SeeDetails (data) {
            this.condition = data
            this.show = true
        },
        
        /************************************************************
         * 
         * 请求分页数据
         * 
         ************************************************************/
        pagesData (index) {
            this.data = []
            this.columns = []
            this.tableload = true
            this.queryData (index)
        },
        
        /************************************************************
         * 
         * 请求列表数据
         * 
         ************************************************************/
        queryData (index) {
            this.$http.get(this.url + index).then(val=>{
                this.handelData(val.data[0])
                this.data = val.data
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        },
        
        /************************************************************
         * 
         * 数据处理
         * 
         ************************************************************/
        handelData (data) {
            this.columns.push({
                title: '班级名称',
                minWidth: 150,
                fixed:'left',
                align: 'center',
                render: (h, params) => {
                        return h('div', params.row.eclass_name.zh?params.row.eclass_name.zh:params.row.eclass_name.mn);
                    },
            })
            data.data.forEach(el => {
                this.columns.push({
                    title: el.watchlist_name.zh?el.watchlist_name.zh:el.watchlist_name.mn,
                    minWidth: 150,
                    align: 'center',
                    value: el.watchlist_id,
                    renderHeader: (h, params) => {
                        return h('div', {
                            style: {
                                minWidth: '150px',
                                height: '80px'
                            }
                        }, [
                            h('div', {
                                style: {
                                    width: '100%',
                                    height: '39px',
                                    borderBottom: '1px solid #e9eaec',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }
                            }, el.watchlist_name.zh?el.watchlist_name.zh:el.watchlist_name.mn),
                            h('div', {
                                style: {
                                    width: '100%',
                                    height: '40px',
                                    display: 'flex',
                                }
                            }, [
                                h('div', {
                                    style: {
                                        height: '40px',
                                        borderRight: '1px solid #e9eaec',
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center'
                                    }
                                }, '加分'),
                                h('div', {
                                    style: {
                                        height: '40px',
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center'
                                    }
                                }, '减分'),
                            ])
                        ])
                    },
                    render: (h, params) => {
                        let name = params.row.data.find(i => i.watchlist_id == params.column.value)
                        return h('div', {
                            style: {
                                width: '100%',
                                height: '48px',
                                display: 'flex',
                            }
                        },[
                            h('div', {
                                style: {
                                    height: '48px',
                                    flex: 1,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small',
                                        disabled: name.plus != 0?false:true
                                    },
                                    on: {
                                        click: () => {
                                            this.SeeDetails(name.plusapi)
                                        }
                                    }
                                }, name.plus),
                            ]),
                            h('div', {
                                style: {
                                    height: '48px',
                                    flex: 1,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled: name.reduce != 0?false:true
                                    },
                                    on: {
                                        click: () => {
                                            this.SeeDetails(name.reduceapi)
                                        }
                                    }
                                }, name.reduce),
                            ]),
                        ])
                    }
                })
            })
            this.columns.push({
                title: '总统计',
                minWidth: 150,
                align: 'center',
                render: (h, params) => {
                    let name = params.row.data[0]
                    return h('div', name.cont)
                }
            })
        }
    },
    created(){
        this.queryData (1)
    },
};
</script>
<style lang="less">
.dutymodule-myclassduty .ivu-table-cell {
    padding: 0;
}
</style>